<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="no" />
    <title>{{if eq .uid .first.id}}{{.second.monicker}}{{else}}{{.first.monicker}}{{end}}</title>
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css">
    <script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/css/SUI.css?v123">
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/app.css?v=042105">
    <!-- <link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/dropload.css" rel="stylesheet" /> -->
    <style type="text/css">
    .mui-content>.mui-table-view:first-child{margin: 0;background: #efeff4}
    .mui-table-view-cell:after{height: 0}
    .mui-table-view-cell:before{height: 0}
    .mui-table-view-cell{padding: 0!important;background-color: #efeff4;}
    #pullrefresh{height: calc(100% - 45px)}
    /*ul.mui-table-view{height: 100%;overflow: scroll;}*/
    .mui-table-view:after{height: 0}
    .mui-table-view:before{height: 0}
    </style>
</head>
<body class="msgCont">
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <ul class="mui-table-view mui-table-view-chevron" id="log">
        {{range $k,$v:=.json}}
            <li class="mui-table-view-cell" id="{{$k}}">
                <dl class="{{if eq $v.fid $.uid}}right{{else}}left{{end}}">
                    <dt class="suiBgImg" style="background-image: url({{if eq $v.fid $.first.id}}{{$.first.pathname}}{{else}}{{$.second.pathname}}{{end}});"></dt>
                    <dd>{{$v.content}}</dd>
                </dl>
            </li>           
        {{end}}
        </ul>
    </div>
    <footer> <input id="msg" type="text"> <span class="send" id="send"></span></footer>
</body>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
<!-- <script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script> -->
{{template "wechat/public/share.html" .}}
<script type="text/javascript" charset="utf-8">
    document.querySelector(".send").onclick = function(){
        if (document.querySelector("input[name=msg]").value == "") {
            sui.toast({
                text:'请输入内容'
            })
        }
    }
    var fid={{.uid}};
    var fpath={{if eq .uid .first.id}}{{.first.pathname}}{{else}}{{.second.pathname}}{{end}};
    var uid={{if eq .uid .first.id}}{{.second.id}}{{else}}{{.first.id}}{{end}};
    var upath={{if eq .uid .first.id}}{{.second.pathname}}{{else}}{{.first.pathname}}{{end}};
    function scroll(){
        var length=$('li').length
        var height=length*76
        var height2=$('#pullrefresh').height()
        console.log(height,height2)
        height=height-height2
        $('.mui-table-view').css('transition-duration','0ms')
        $('.mui-table-view').css('transform','translate3d(0px, -'+height+'px, 0px) translateZ(0px)')
        $('.mui-table-view').css('transition-timing-function','cubic-bezier(0.165, 0.84, 0.44, 1)')
    }
window.onload = function () {
    scroll()
    // var length=$('li').length
    // if (length>8){
    //     length-=9
    //     console.log(1)
    //     window.location.href="#"+length
    // }
    //var div = document.getElementById('log');
    // div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
    //div.scrollTop = div.scrollHeight;

    var conn;
    var msg = document.getElementById("msg");
    var log = document.getElementById("log");
    function appendLog(item) {
        // var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
        log.appendChild(item);
        scroll()
        // if (doScroll) {
        //     log.scrollTop = log.scrollHeight - log.clientHeight;
        // }
        // $('#log').scrollTop(9999999)
        // var length=$('li').length
        // if (length>0){
        //     length-=1
        //     console.log(1)
        //     window.location.href="#"+length
        // }
    }
    document.getElementById("send").onclick = function () {
        if (!conn) {
            return false;
        }
        if (!msg.value) {
            return false;
        }
        var send={}
        send.message=msg.value
        send.fid=fid
        send.uid=uid
        conn.send(JSON.stringify(send));
        msg.value = "";
        return false;
    };

    if (window["WebSocket"]) {
        var thisurl=window.location.href
        thisurl=thisurl.split('?')
        conn = new WebSocket("ws://" + document.location.host + "/mobile/ws?id="+uid);
        conn.onclose = function (evt) {
            // var item = document.createElement("div");
            // item.innerHTML = "<b>Connection closed.</b>";
            // appendLog(item);
        };
        conn.onmessage = function (evt) {
            var messages =JSON.parse(evt.data);
            var dl = document.createElement("li");
            dl.className="mui-table-view-cell"
            var html=``
            if (messages.fid==fid){
                html+=`<dl class="right"><dt class="suiBgImg" style="background-image: url(`+fpath+`);"></dt>
                    <dd>`+messages.message+`</dd></dl>`
            }else{
                html+=`<dl class="left"><dt class="suiBgImg" style="background-image: url(`+upath+`);"></dt>
                    <dd>`+messages.message+`</dd></dl>`
            }
            dl.innerHTML = html;
            appendLog(dl);
            // for (var i = 0; i < messages.length; i++) {
            //     var item = document.createElement("div");
            // }
        };
    } else {
        var item = document.createElement("div");
        item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
        appendLog(item);
    }
};
</script>
<!-- <script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script> -->
<!-- <script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script> -->
<script>
    mui.init({
      pullRefresh : {
        container:'#pullrefresh',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        down : {
          height:50,//可选.默认50.触发上拉加载拖动距离
          auto:false,//可选,默认false.自动上拉加载一次
          contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
          callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
        }
      }
    });
    var page=2
    function pullupRefresh() {
        var that=this
         $.ajax({
            type: 'GET',
            url: window.location.href,
            dataType: 'json',
            data:{page:page},
            success: function(res){
                console.log(res)
              page+=1
              if(res.info){
                for (var i=0;i<res.info.length;i++){
                    var li = document.createElement('li');
                    li.className="mui-table-view-cell"
                    var dl = document.createElement('dl');
                    if(res.info[i].uid==fid){
                        dl.className="left"
                    }else{
                        dl.className="right"
                    }
                    var html=`<dt class="suiBgImg" style="background-image: url(`
                    if(res.info[i].uid==fid){
                        html+=upath
                    }else{
                        html+=fpath
                    }
                    html+=`);"></dt><dd>`+res.info[i].content+`</dd>`
                    dl.innerHTML=html
                    li.appendChild(dl)
                    $('.mui-table-view-chevron').prepend(li)
                }
                that.endPulldownToRefresh();
                }else{
                    mui.toast("没有更多了！");
                    that.endPulldownToRefresh(false);
                    mui('#pullrefresh').pullRefresh().disablePulldownToRefresh();
                }
            },
            error: function(xhr, type){
                mui.toast("网络慢，请重新刷新!");
            }
        });
    }

// $('.msgCont').dropload({
//     scrollArea : window,
//     loadUpFn : function(me){
//         $.ajax({
//             type: 'GET',
//             url: window.location.href,
//             dataType: 'json',
//             data:{page:page},
//             success: function(res){
//            $(".dropload-down").remove();
//               page+=1
//               if(res){
//                  for (var i=res.length-1;i>=0;i--){
//                     var dl = document.createElement('dl');
//                     if(res[i].uid==fid){
//                      dl.className="left"
//                     }else{
//                      dl.className="right"
//                     }
//                     var html=`<dt class="suiBgImg" style="background-image: url(`
//                     if(res[i].uid==fid){
//                      html+=upath
//                     }else{
//                      html+=fpath
//                     }
//                      html+=`);"></dt><dd>`+res[i].content+`</dd>`
//                     dl.innerHTML=html
//                     $('#log').prepend(dl)
//                 }
//                 me.resetload();
//                 }else{
//                     mui.toast("没有更多了！");
//                     $(".dropload-up").remove();
//                 }
//             },
//             error: function(xhr, type){
//                 mui.toast("网络慢，请重新刷新!");
//                 me.resetload();
//             }
//         });
//     },
//     loadDownFn : function(me){
//      $(".dropload-down").remove();
//      me.resetload();
//     }
// });
</script>
</html>